$border: 1px solid #DCDFE6;

.params-form {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 50px;

    >div:last-child {
        grid-column: 3;

        ::v-deep(.el-form-item__content) {
            display: flex;
            justify-content: end;
        }
    }
}

.table-add {
    margin: 20px 0;
    display: flex;
    justify-content: space-between;

    ::v-deep(.el-checkbox__inner) {
        border-radius: 50% !important;
        transform: scale(1.2);
    }
}

.table {
    border: $border;

    .table-head,
    .row {
        min-height: 40px;
        display: grid;
        grid-template-columns: repeat(var(--colums), 1fr);
        border-bottom: $border;

        >div {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        >div:last-child {
            border-right: none;
            border-left: $border;
        }

        &:last-child {
            border-bottom: none;
        }

        &:nth-child(even) {
            background: #F2F6FC;
        }
    }

    .table-head {
        background: #F2F6FC;
    }

    .desc {
        word-break: break-all;
        word-wrap: break-word;
        overflow-wrap: break-word;
        padding: 10px 0;
    }
}

.preview {
    word-break: break-all;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

::v-deep(.el-drawer.rtl) {
    border-radius: 20px 0 0 20px;
    width: 500px !important;
}

::v-deep(.el-drawer__body) {
    padding: 0 !important;
}

.drawer-content {
    padding: 20px;
    padding-bottom: 0;

    .title-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;

        .el-icon {
            font-size: 20px;
        }
    }

    .form-item-space {
        flex: 1;
        display: flex;
        gap: 10px;

        ::v-deep(.el-select__wrapper) {
            box-sizing: border-box;
            padding: 0 10px 0 6px;
        }
    }

    .oa-form {
        max-height: calc(100vh - 380px);
        background: #F6F8FA;
        width: 460px;
        padding: 10px;
        box-sizing: border-box;
    }

    &:first-child {
        .params-form-gray {
            padding-bottom: 20px;
            margin-bottom: 20px;
        }
    }

}

.footer-btn {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.overdue {
    color: red;
}

.sure {
    img {
        width: 100px;
        height: 100px;
    }
}
.avatar-uploader{
    .list {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }
  
    .upload {
      width: 80px;
      height: 80px;
      background: #F2F3F5;
      display: grid;
      grid-template-columns: 1fr;
      place-items: center;
      align-self: center;
      color: #C9CDD4;
  
      span {
        font-style: normal;
      }
    }
  
    .el-icon svg {
      font-size: 24px;
    }
  
    .code {
      width: 80px;
      height: 80px;
      background: #F2F3F5;
      position: relative;
  
      &:hover {
        .del {
          display: flex;
          gap: 10px;
        }
      }
  
      .del {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(0, 0, 0, .2);
        display: none;
        color: #F2F3F5;
        font-size: 20px;
  
      }
    }
  }
  